<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Todo List App</title>
    <!-- Bootstrap CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <!-- Custom CSS -->
    <link href="css/style.css" rel="stylesheet" />
  </head>
  <body>
    <div class="main-container">
      <h4 class="text-center my-3">Todo List</h4>
      <div class="container mb-3">
        <div class="todo-container">
          <!-- 搜索表单 -->
          <div class="search-form">
            <div class="search-form-main">
              <div class="row g-2">
                <div class="col-md-2">
                  <input type="text" class="form-control form-control-sm" id="searchUserName" placeholder="按用户名搜索" />
                </div>
                <div class="col-md-1">
                  <select class="form-control form-control-sm" id="searchStatus">
                    <option value="">所有状态</option>
                    <option value="active">启用</option>
                    <option value="inactive">停用</option>
                  </select>
                </div>
                <div class="col-md-1">
                  <input type="text" class="form-control form-control-sm" id="searchNickName" placeholder="按昵称搜索" />
                </div>
                <div class="col-md-1">
                  <input type="text" class="form-control form-control-sm" id="searchPhone" placeholder="按电话搜索" />
                </div>
                <div class="col-md-1">
                  <input type="text" class="form-control form-control-sm" id="searchEmail" placeholder="按邮箱搜索" />
                </div>
                <div class="col-md-1">
                  <button type="button" class="btn btn-primary btn-sm" id="searchBtn">搜索</button>
                  <button type="button" class="btn btn-secondary btn-sm" id="resetSearchBtn">重置</button>
                </div>
              </div>
            </div>
            <div>
              <!-- 删除选中 -->
              <button type="button" class="btn btn-danger btn-sm" id="btnDeleteSelected">删除选中</button>
              <!-- 添加任务按钮 -->
              <button type="button" class="btn btn-primary primary btn-sm" data-bs-toggle="modal" data-bs-target="#todoFormModal">新建</button>
            </div>
          </div>
        </div>
      </div>
      <div class="container todo-warp">
        <div class="todo-container">
          <!-- Todo List 表格 -->
          <div class="table-wrapper" id="tableWrapper">
            <table class="table table-bordered table-striped table-hover table-header">
              <thead class="thead-dark">
                <tr>
                  <th class="fixed-column" width="90px">
                    <input class="form-check-input" type="checkbox" value="" id="chkAll" />
                    <label class="form-check-label" for="chkAll" id="lblChkAll">全选</label>
                  </th>
                  <th width="100px">用户名</th>
                  <th width="100px">昵称</th>
                  <th width="150px">电话</th>
                  <th width="180px">邮箱</th>
                  <th width="90px">性别</th>
                  <th width="90px">状态</th>
                  <th>任务</th>
                  <th class="fixed-column" width="135px">操作</th>
                </tr>
              </thead>
            </table>
            <div class="table-container" id="tableContainer">
              <table class="table table-bordered table-striped table-hover">
                <tbody id="todoList">
                  <!-- 动态内容 -->
                </tbody>
              </table>
            </div>
          </div>
          <!-- 分页 -->
          <div class="pagination-container">
            <ul class="pagination" id="pagination">
              <li class="page-item">
                <a class="page-link" href="#" aria-label="Previous">
                  <span aria-hidden="true">&laquo;</span>
                </a>
              </li>
              <li class="page-item"><a class="page-link" href="#">1</a></li>
              <li class="page-item"><a class="page-link" href="#">2</a></li>
              <li class="page-item"><a class="page-link" href="#">3</a></li>
              <li class="page-item">
                <a class="page-link" href="#" aria-label="Next">
                  <span aria-hidden="true">&raquo;</span>
                </a>
              </li>
            </ul>
          </div>

          <div class="text-center py-4 text-muted" id="emptyMessage">没有任务数据</div>
        </div>
      </div>
    </div>
    <!-- 表单对话框 -->
    <div class="modal fade" id="todoFormModal" tabindex="-1" role="dialog" aria-labelledby="todoFormModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="todoFormModalLabel">添加新任务</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <!-- Todo Form -->
            <form id="todoForm" novalidate>
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="nickName" class="form-label">昵称</label>
                    <input type="text" class="form-control" id="nickName" required minlength="2" maxlength="30" placeholder="请输入昵称" />
                    <div class="invalid-feedback">请输入昵称（2-30个字符）。</div>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="userName" class="form-label">用户名</label>
                    <input type="text" class="form-control" id="userName" required minlength="3" maxlength="30" placeholder="请输入用户名" />
                    <div class="invalid-feedback">请输入用户名（3-30个字符）。</div>
                  </div>
                </div>
              </div>

              <div class="row">
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="phoneNumber" class="form-label">电话</label>
                    <input type="tel" class="form-control" id="phoneNumber" required pattern="[0-9]{10,11}" placeholder="请输入电话" />
                    <div class="invalid-feedback">请输入一个有效的电话号码（10-11位数字）。</div>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="email" class="form-label">邮箱</label>
                    <input type="email" class="form-control" id="email" required placeholder="请输入邮箱" />
                    <div class="invalid-feedback">请输入有效的电子邮件地址。</div>
                  </div>
                </div>
              </div>

              <div class="row">
                <div class="col-md-6">
                  <div class="form-group">
                    <label class="form-label">性别</label>
                    <div style="display: flex;">
                      <div class="form-check">
                        <input class="form-check-input" type="radio" name="sex" id="male" value="male" checked />
                        <label class="form-check-label" for="male">男</label>
                      </div>
                      <div class="form-check" style="margin-left: 20px;">
                        <input class="form-check-input" type="radio" name="sex" id="female" value="female" />
                        <label class="form-check-label" for="female">女</label>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="status" class="form-label">状态</label>
                    <select class="form-control" id="status" required>
                      <option value="active">启用</option>
                      <option value="inactive">停用</option>
                    </select>
                  </div>
                </div>
              </div>

              <div class="form-group">
                <label for="todoText" class="form-label">任务</label>
                <input type="text" class="form-control" id="todoText" required minlength="3" maxlength="100" placeholder="Enter task..." />
                <div class="invalid-feedback">Please enter a task (3-100 characters).</div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
            <button type="button" class="btn btn-primary" id="saveTodoBtn">保存</button>
          </div>
        </div>
      </div>
    </div>
    <!-- 删除确认对话框 -->
    <div class="modal fade" id="deleteConfirmModal" tabindex="-1" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">确认删除</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <p id="deleteConfirmMessage">确定要删除这个任务吗？</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
            <button type="button" class="btn btn-danger" id="confirmDeleteBtn">确定删除</button>
          </div>
        </div>
      </div>
    </div>
    <!-- 批量删除模态框 -->
    <div class="modal fade" id="alertModal" tabindex="-1" aria-hidden="true">
      <div class="modal-dialog">
        <div class="alert alert-warning alert-dismissible m-0">
          <strong>警告！</strong> 没有选中任务。
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
      </div>
    </div>
    <!-- 表格行模板 -->
    <script id="todo-template" type="text/x-handlebars-template">
      {{#each todos}}
      <tr data-id="{{id}}" class="{{#if completed}}table-secondary{{/if}}" >
        <td class="fixed-column"  width="90px">
          <input class="form-check-input rowChk" type="checkbox" value="" id="id{{id}}">
          <label class="form-check-label" for="id{{id}}">{{id}}</label>
        </td>
        <td width="100px">{{userName}}</td>
        <td width="100px">{{nickName}}</td>
        <td width="150px">{{phoneNumber}}</td>
        <td width="180px">{{email}}</td>
        <td width="90px">{{#if (eq sex "male")}}男{{else}}女{{/if}}</td>
        <td width="90px">{{#if (eq status "active")}}启用{{else if (eq status "inactive")}}停用{{/if}}</td>
        <td class="{{#if completed}}text-decoration-line-through{{/if}}">{{text}}</td>
        <td class="fixed-column"  width="120px">
          <button type="button" class="btn btn-sm btn-primary edit-btn">编辑</button>
          <button type="button" class="btn btn-sm btn-danger delete-btn">删除</button>
        </td>
      </tr>
      {{/each}}
    </script>
    <!-- 分页模板 -->
    <script id="pagination-template" type="text/x-handlebars-template">
      <li class="page-item">
        <a class="page-link" href="#page={{startPage}}" aria-label="Previous">
          <span aria-hidden="true">&laquo;</span>
        </a>
      </li>
      {{#if hasPrev}}
      <li class="page-item">
        <a class="page-link" href="#page={{prevPage}}" aria-label="Previous">
          <span aria-hidden="true">&lsaquo;</span>
        </a>
      </li>
      {{/if}}
      {{#each pages}}
        <li class="page-item
            {{#if (eq ../currentPage this)}}active{{/if}}
            {{#if (isEllipsis this)}}disabled{{/if}}"
            {{#if (eq ../currentPage this)}}aria-current="page"{{/if}}>
          <a class="page-link" href="#page={{this}}" {{#if (isEllipsis this)}}tabindex="-1"{{/if}}>
            {{this}}
          </a>
        </li>
      {{/each}}
      {{#if hasNext}}
      <li class="page-item">
        <a class="page-link" href="#page={{nextPage}}" aria-label="Next">
          <span aria-hidden="true">&rsaquo;</span>
        </a>
      </li>
      {{/if}}
      <li class="page-item">
        <a class="page-link" href="#page={{endPage}}" aria-label="Previous">
          <span aria-hidden="true">&raquo;</span>
        </a>
      </li>
    </script>
    <!-- jQuery -->
    <script src="js/jquery-3.7.1.min.js"></script>
    <!-- Bootstrap Bundle with Popper -->
    <script src="js/bootstrap.bundle.min.js"></script>
    <!-- Handlebars -->
    <script src="js/handlebars.min.js"></script>

    <!-- Pagination -->
    <script src="js/pagination.js"></script>
    <!-- Custom JavaScript -->
    <script src="js/index.js"></script>
  </body>
</html>
